<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" ref="queryRef" style="margin-bottom: 12px;" class="search_card" v-show="showSearch">
      <div class="filter-container">
        <div class="search_box" style="padding-bottom: 16px">
          <el-form :model="queryParams" ref="queryForm" label-width="80px" size="mini">
            <el-row :gutter="16">
              <el-col :md="6" >
                <el-form-item prop="searchValues">
                  <el-select
                    v-model="queryParams.searchValues"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    placeholder="请输入购方名称/结算单号"
                    :remote-method="remoteSearchValue"
                    @change="handleQuery"
                    :loading="remoteSearchValueLoading"
                    style="width: 315px;margin-left: -78px"
                  >
                    <el-option
                      v-for="item in searchValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="2" >
                <el-button size="mini"  @click="toggleAdvanced" type="primary" plain style="padding: 6px 15px;">
                  {{ advanced ? '收起' : '展开' }}
                  <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </el-button>
              </el-col>
              <el-col :md="16" align="right" class="longBtnBar">
              </el-col>
            </el-row>
            <div class="search_advanced_bar" v-if="advanced">
              <el-card shadow="never" >
                <el-row :gutter="16" >
<!--                  <el-col :md="6" >-->
<!--                    <el-form-item label="公司" prop="siteCode">-->
<!--                      <el-input v-model="queryParams.params.companynames" maxlength = 0 clearable placeholder="请选择公司" >-->
<!--                        <el-button slot="append" icon="el-icon-search" @click="openSearchsiteCodeDialogOpen">-->
<!--                        </el-button>-->
<!--                      </el-input>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :md="8" >
                    <el-form-item label="发票日期">
                      <el-date-picker
                        v-model="daterangeInvoiceDate"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :md="6" align="right" style="float: right;" >
                    <el-form-item>
                      <el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button>
                      <el-button class="filter-item" style="margin-left: 8px" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="票据类型" prop="nonInvoiceType">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllNonInvoiceType" :indeterminate="isNonInvoiceTypeIndeterminate" label="全选" size="mini" @change="checkAll($event,'nonInvoiceType')" border></el-checkbox>
                        </el-col>
                        <el-col :md="19" >
                          <el-checkbox-group v-model="queryParams.nonInvoiceTypes" @change="handleCheckedChange($event,'nonInvoiceType')">
                            <el-checkbox v-for="dict in dict.type.non_invoice_type" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="采集时间">
                      <el-date-picker
                        v-model="daterangeCreateTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="出发日期" prop="travelDate">
                      <el-date-picker clearable
                                      v-model="queryParams.travelDate"
                                      type="date"
                                      style="width: 100%"
                                      value-format="yyyy-MM-dd"
                                      placeholder="请选择出发日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="报销状态" prop="submitStatus">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllSubmitStatus" :indeterminate="isSubmitStatusIndeterminate" label="全选" size="mini" @change="checkAll($event,'submitStatus')" border></el-checkbox>
                        </el-col>
                        <el-col :md="18" >
                          <el-checkbox-group v-model="queryParams.submitStatuses" @change="handleCheckedChange($event,'submitStatus')">
                            <el-checkbox v-for="dict in dict.type.submit_status" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="身份证号" prop="sellerAccount">
                      <el-input
                        v-model="queryParams.sellerAccount"
                        placeholder="请输入身份证号"
                        clearable
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="凭证号" prop="voucherNumber">
                      <el-input
                        v-model="queryParams.voucherNumber"
                        placeholder="请输入凭证号"
                        clearable
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="入账日期">
                      <el-date-picker
                        v-model="daterangeAccountDate"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="入账状态" prop="accountStatus">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllAccountStatus" :indeterminate="isAccountStatusIndeterminate" label="全选" size="mini" @change="checkAll($event,'accountStatus')" border></el-checkbox>
                        </el-col>
                        <el-col :md="19" >
                          <el-checkbox-group v-model="queryParams.accountStatuses" @change="handleCheckedChange($event,'accountStatus')">
                            <el-checkbox v-for="dict in dict.type.account_status" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="发票状态" prop="invoiceStatus">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllInvoiceStatus" :indeterminate="isInvoiceStatusIndeterminate" label="全选" size="mini" @change="checkAll($event,'invoiceStatus')" border></el-checkbox>
                        </el-col>
                        <el-col :md="18" >
                          <el-checkbox-group v-model="queryParams.invoiceStatuses" @change="handleCheckedChange($event,'invoiceStatus')">
                            <el-checkbox v-for="dict in dict.type.invoice_status" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="ERP流水" prop="erpSerialNumber">
                      <el-input
                        v-model="queryParams.erpSerialNumber"
                        placeholder="请输入ERP发票流水号"
                        clearable
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" >
      <template #header>
        <el-row>
          <el-col :span="8">
            <div class="card-header">
              <el-button disabled type="text">进项非增值税发票信息</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="btn_box" align="right" style="float: right;">
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-download"
                @click="handleExport"
                size="mini"
                v-hasPermi="['system:innonvoice:export']"
              >导出</el-button>
              <right-toolbar :showSearch.sync="showSearch" :columns.sync="columns" :columnsKey.sync="columnsKey" @showSearchFun="showSearchFun" @queryTable="getList" :tableKey.sync="tableKey"></right-toolbar>
            </div>
          </el-col>
        </el-row>
      </template>

      <el-table
              border
              stripe
              default-expand-all
              ref="tableRef"
              :key="tableKey"
              v-loading="loading"
              :data="innonvoiceList"
              @selection-change="handleSelectionChange"
              :row-style="rowClass"
              :header-cell-style= "{
                'font-size': '14px !important',
                'font-weight': '500 !important',
                'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
              }"
              highlight-current-row style="width: 100%;"
              :height="tableHeight"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="55">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <template v-for="item in columns">
<!--          <el-table-column label="公司" align="center" key="siteName" prop="siteName" v-if="item.visible && item.label=='公司'" :show-overflow-tooltip="true"/>-->
          <el-table-column label="票据类型" align="center" key="invoiceTypeName" prop="invoiceTypeName" v-if="item.visible && item.label=='票据类型'"  width="100"/>
          <el-table-column label="乘车日期" align="center" prop="rideTime" v-if="item.visible && item.label=='公司'" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.rideTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发票号码" align="center" key="invoiceNo" prop="invoiceNo"  v-if="item.visible && item.label=='发票号码'"  width="110"/>
          <el-table-column label="乘车人" align="center" prop="sellerBank" v-if="item.visible && item.label=='乘车人'" width="110"/>
          <el-table-column label="采集日期" align="center" prop="createTime" v-if="item.visible && item.label=='采集日期'" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="座位类型" align="center" prop="seatType" v-if="item.visible && item.label=='座位类型'" width="110"/>
          <el-table-column label="金额(含税)" align="center" prop="fee" v-if="item.visible && item.label=='金额(含税)'" width="110"/>
          <el-table-column label="金额(不含税)" align="center" prop="feeWithoutTax" v-if="item.visible && item.label=='金额(不含税)'" width="140"/>
          <el-table-column label="燃油附加费" align="center" prop="feeExtra" v-if="item.visible && item.label=='燃油附加费'" width="140"/>
          <el-table-column label="税额" align="center" prop="tax" v-if="item.visible && item.label=='税额'" width="110"/>
          <el-table-column label="车费" align="center" prop="feeVehicle" v-if="item.visible && item.label=='车费'" width="110"/>
          <el-table-column label="乘车地区" align="center" prop="sellerName" v-if="item.visible && item.label=='乘车地区'" width="110"/>
          <el-table-column label="乘车行程(出发地)" align="center" prop="sellerNumber" v-if="item.visible && item.label=='乘车行程(出发地)'" width="160" :show-overflow-tooltip="true"/>
          <el-table-column label="乘车行程(目的地)" align="center" prop="sellerDest" v-if="item.visible && item.label=='乘车行程(目的地)'" width="160" :show-overflow-tooltip="true"/>
          <el-table-column label="里程" align="center" prop="sellerTel" v-if="item.visible && item.label=='里程'" width="100"/>
          <el-table-column label="身份证号" align="center" prop="sellerAccount" v-if="item.visible && item.label=='身份证号'" width="120" :show-overflow-tooltip="true"/>
          <el-table-column label="凭证号" align="center" prop="voucherNumber" v-if="item.visible && item.label=='凭证号'"  width="120" :show-overflow-tooltip="true"/>
          <el-table-column label="入账日期" align="center" prop="accountDate" v-if="item.visible && item.label=='入账日期'" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.accountDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入账状态" align="center" prop="accountStatusName" v-if="item.visible && item.label=='入账状态'" width="120"/>
          <el-table-column label="航班号" align="center" prop="flightNo" v-if="item.visible && item.label=='航班号'" width="120" :show-overflow-tooltip="true"/>
          <el-table-column label="出发日期" align="center" prop="travelDate" v-if="item.visible && item.label=='出发日期'" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.travelDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="校验码" align="center" prop="checkCode" v-if="item.visible && item.label=='校验码'" width="100" :show-overflow-tooltip="true"/>
          <el-table-column label="发票备注" align="center" prop="invoiceRemark" v-if="item.visible && item.label=='发票备注'" width="120" :show-overflow-tooltip="true"/>
          <el-table-column label="ERP发票流水号" align="center" prop="erpSerialNumber" v-if="item.visible && item.label=='ERP发票流水号'" width="140" :show-overflow-tooltip="true"/>
        </template>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleOpenInvoice(scope.row)"
            >发票&影像预览</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <svg-icon icon-class="search-none" style="font-size: 64px;" />
          <p>暂无数据</p>
        </div>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改进项非增值税发票对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="720px" top="10vh" append-to-body>
        <div style="height: 490px;overflow: auto; padding: 12px 24px;">
          <el-form ref="form" size="mini" :model="form" :rules="rules" label-position="top">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="发票ID" prop="invoiceId">
                  <el-input v-model="form.invoiceId" placeholder="请输入发票ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="${columnAlias}" prop="custId">
                    <el-input
                            v-model="form.name"
                            maxlength = 0
                            clearable
                            readonly
                            placeholder="请选择公司代码"
                    >
                        <el-button slot="append" icon="el-icon-search" @click="opencustIdDialogOpen">
                        </el-button>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="${columnAlias}" prop="siteCode">
                    <el-input
                            v-model="form.companyname"
                            maxlength = 0
                            clearable
                            readonly
                            placeholder="请选择公司代码"
                    >
                        <el-button slot="append" icon="el-icon-search" @click="opensiteCodeDialogOpen">
                        </el-button>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司" prop="siteName">
                  <el-input v-model="form.siteName" placeholder="请输入公司" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="票据类型代码" prop="nonInvoiceType">
                  <el-select v-model="form.nonInvoiceType" placeholder="请选择票据类型代码" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.non_invoice_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="票据类型" prop="nonInvoiceTypeName">
                  <el-input v-model="form.nonInvoiceTypeName" placeholder="请输入票据类型" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票号码" prop="invoiceNo">
                  <el-input v-model="form.invoiceNo" placeholder="请输入发票号码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票代码" prop="invoiceCode">
                  <el-input v-model="form.invoiceCode" placeholder="请输入发票代码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="航班号" prop="flightNo">
                  <el-input v-model="form.flightNo" placeholder="请输入航班号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出发日期" prop="travelDate">
                  <el-date-picker clearable
                    style="width: 100%;"
                    v-model="form.travelDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择出发日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票日期" prop="invoiceDate">
                  <el-date-picker clearable
                    style="width: 100%;"
                    v-model="form.invoiceDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择发票日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="印刷序号" prop="printNumber">
                  <el-input v-model="form.printNumber" placeholder="请输入印刷序号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(含税)" prop="fee">
                  <el-input v-model="form.fee" placeholder="请输入金额(含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(不含税)" prop="feeWithoutTax">
                  <el-input v-model="form.feeWithoutTax" placeholder="请输入金额(不含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="燃油附加费" prop="feeExtra">
                  <el-input v-model="form.feeExtra" placeholder="请输入燃油附加费" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税额" prop="tax">
                  <el-input v-model="form.tax" placeholder="请输入税额" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车费" prop="feeVehicle">
                  <el-input v-model="form.feeVehicle" placeholder="请输入车费" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车地区" prop="sellerName">
                  <el-input v-model="form.sellerName" placeholder="请输入乘车地区" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车行程(出发地)" prop="sellerNumber">
                  <el-input v-model="form.sellerNumber" placeholder="请输入乘车行程(出发地)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车行程(目的地)" prop="sellerDest">
                  <el-input v-model="form.sellerDest" placeholder="请输入乘车行程(目的地)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车日期" prop="rideTime">
                  <el-date-picker clearable
                    style="width: 100%;"
                    v-model="form.rideTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择乘车日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="里程" prop="sellerTel">
                  <el-input v-model="form.sellerTel" placeholder="请输入里程" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乘车人" prop="sellerBank">
                  <el-input v-model="form.sellerBank" placeholder="请输入乘车人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="sellerAccount">
                  <el-input v-model="form.sellerAccount" placeholder="请输入身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="凭证号" prop="voucherNumber">
                  <el-input v-model="form.voucherNumber" placeholder="请输入凭证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账日期" prop="accountDate">
                  <el-date-picker clearable
                    style="width: 100%;"
                    v-model="form.accountDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择入账日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账状态代码" prop="accountStatus">
                  <el-radio-group v-model="form.accountStatus">
                    <el-radio-button
                      v-for="dict in dict.type.account_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入账状态" prop="accountStatusName">
                  <el-input v-model="form.accountStatusName" placeholder="请输入入账状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理状态代码" prop="processStatus">
                  <el-radio-group v-model="form.processStatus">
                    <el-radio-button
                      v-for="dict in dict.type.process_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理状态" prop="processStatusName">
                  <el-input v-model="form.processStatusName" placeholder="请输入处理状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票状态代码" prop="invoiceStatus">
                  <el-radio-group v-model="form.invoiceStatus">
                    <el-radio-button
                      v-for="dict in dict.type.invoice_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票状态" prop="invoiceStatusName">
                  <el-input v-model="form.invoiceStatusName" placeholder="请输入发票状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报销状态代码" prop="submitStatus">
                  <el-radio-group v-model="form.submitStatus">
                    <el-radio-button
                      v-for="dict in dict.type.submit_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报销状态" prop="submitStatusName">
                  <el-input v-model="form.submitStatusName" placeholder="请输入报销状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校验码" prop="checkCode">
                  <el-input v-model="form.checkCode" placeholder="请输入校验码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票备注" prop="invoiceRemark">
                  <el-input v-model="form.invoiceRemark" placeholder="请输入发票备注" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ERP发票流水号" prop="erpSerialNumber">
                  <el-input v-model="form.erpSerialNumber" placeholder="请输入ERP发票流水号" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-divider content-position="center">进项非增值税发票发票附件信息</el-divider>
              </el-col>
              <el-col :span="24">
                <el-button type="primary" icon="el-icon-plus" @click="handleAddTInNonInvoiceFile">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteTInNonInvoiceFile">删除</el-button>
              </el-col>
              <el-col :span="24">
                <el-table :data="tInNonInvoiceFileList" :row-class-name="rowTInNonInvoiceFileIndex" @selection-change="handleTInNonInvoiceFileSelectionChange" style="width: 100%" height="300px" ref="tInNonInvoiceFile">
                  <el-table-column type="selection" width="50" align="center" />
                  <el-table-column label="序号" align="center" prop="index" width="50"/>
                  <el-table-column label="文件ID" prop="fileId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fileId" placeholder="请输入文件ID" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="custId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.custId" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="siteCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.siteCode" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="公司" prop="siteName" width="150">-->
<!--                    <template slot-scope="scope">-->
<!--                      <el-input v-model="scope.row.siteName" placeholder="请输入公司" />-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                  <el-table-column label="发票附件名" prop="fileName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fileName" placeholder="请输入发票附件名" />
                    </template>
                  </el-table-column>
                  <el-table-column label="发票影像" prop="fileUrl" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fileUrl" placeholder="请输入发票影像" />
                    </template>
                  </el-table-column>
                  <el-table-column label="发票样本" prop="fileSampleUrl" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.fileSampleUrl" placeholder="请输入发票样本" />
                    </template>
                  </el-table-column>
                  <el-table-column label="文件类型" prop="fileType" width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.fileType" placeholder="请选择文件类型">
                        <el-option label="请选择字典生成" value="" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="状态 0 未推送，1 已推送" prop="status" width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.status" placeholder="请选择状态 0 未推送，1 已推送">
                        <el-option label="请选择字典生成" value="" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="状态 0 未推送，1 已推送" prop="statusName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.statusName" placeholder="请输入状态 0 未推送，1 已推送" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  size="mini" @click="submitForm">确 定</el-button>
          <el-button  size="mini" @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 查询条件-分公司-弹出查询 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="查询条件-分公司查询" :visible.sync="searchsiteCodeDialogOpen" width="800px" append-to-body>
        <div class="dialog_box" style="height:550px;">
            <el-form label-position="left" :model="searchsiteCodeQueryParams" :inline="true"  ref="searchsiteCodeQueryForm" label-width="88px" >
                <el-form-item  prop="searchsiteCodeSearchValue">
                    <el-input
                            v-model="searchsiteCodeQueryParams.searchValue"
                            size="mini"
                            placeholder="请输入编码或名称查询分公司"
                            @keyup.enter.native="handleSearchsiteCodeQuery"
                            clearable
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchsiteCodeQuery">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="searchsiteCodeSelectLoading" :data="searchsiteCodeList"
                      height="400"
                      @row-click="handleSearchsiteCodeRowClick"
                      ref="searchsiteCodeMultipleTable"
                      :row-key="getSearchsiteCodeListRowKey"
                      :row-style="{height:2+'px'}"
                      :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'background-color':'rgb(241 241 241 / 52%)'
                      }"
                      :cell-style="{padding:'2px 4px'}"
                      border
                      @selection-change="handleSearchsiteCodeSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                <!-- 数据 -->
                <el-table-column prop="siteCode" label="组织编码" width="180"></el-table-column>
                <el-table-column prop="siteName" label="组织名称" ></el-table-column>
            <el-table-column prop="propertyTypeName" label="性质" width="150"></el-table-column>
            </el-table>
            <pagination
                    v-show="searchsiteCodeTotal>0"
                    :total="searchsiteCodeTotal"
                    :page.sync="searchsiteCodeQueryParams.pageNum"
                    :limit.sync="searchsiteCodeQueryParams.pageSize"
                    @pagination="getSearchsiteCodeList"
            />
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="confirmSearchsiteCode">确 定</el-button>
            <el-button size="mini"   @click="searchsiteCodeCancel">取 消</el-button>
        </div>
    </el-dialog>

      <!-- 查看发票 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="发票详情" :visible.sync="invoiceOpen" width="1400px" append-to-body>
        <div class="dialog_box" style="height:650px;">
          <el-row>
            <el-col :span="10">
              <div style="height:575px; overflow-y: auto">
                <el-tabs type="border-card">
                  <el-tab-pane label="发票信息" style="height:500px;">
                    <el-descriptions class="margin-top" title="基本信息" :column="1" border>
                      <template slot="title">
                        <div>基本信息 <span class="invoice-type">{{detailForm.nonInvoiceTypeName}}</span></div>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          发票号码:
                        </template>
                        20141338
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          发票代码:
                        </template>
                        131002027754
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          开票日期:
                        </template>
                        2024-06-23
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="发票金额" :column="1" border>
                      <el-descriptions-item>
                        <template slot="label">
                          金额(含税):
                        </template>
                        ¥10
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-tab-pane>
                  <el-tab-pane label="业务信息" style="height:500px;">
                    <el-descriptions class="margin-top" title="业务信息" :column="1" border>
                      <el-descriptions-item>
                        <template slot="label">
                          报销状态:
                        </template>
                        已报销
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          入账状态:
                        </template>
                        未入账
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          ERP发票流水号:
                        </template>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
            <el-col :span="14">
              <div style="height: 575px; background-color:#404040;">
                <div v-viewer style="visibility: hidden;height:575px">
                  <img v-for="src in images" :key="src" :src="src" :data-source="src">
                </div>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>


    </el-card>
  </div>
</template>

<script>
import { listInnonvoice, getInnonvoice, delInnonvoice, addInnonvoice, updateInnonvoice } from "@/api/doc/innonvoice";
import { listCompany as listcompany, getCompany as getcompany } from "@/api/core/company";
/* 城市列表 **/
import { provinceList, cityList, districtList } from "@/api/system/city";

export default {
  name: "Innonvoice",
  dicts: ['non_invoice_type', 'process_status', 'invoice_status', 'account_status', 'submit_status'],
  data() {
    return {
      advanced: false,
      tableHeight: this.getInitTableHeight(),
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedTInNonInvoiceFile: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      tableKey: 14,
      //
      columnsKey: 'innoninvoice',
      // 自定义列
      columns: [
          // {
          //     key: 0,
          //     label: `公司`,
          //     visible: true
          // },
          {
              key: 1,
              label: `票据类型`,
              visible: true
          },
          {
              key: 2,
              label: `乘车日期`,
              visible: true
          },
          {
              key: 3,
              label: `发票号码`,
              visible: true
          },
          {
              key: 4,
              label: `乘车人`,
              visible: true
          },
          {
              key: 5,
              label: `采集日期`,
              visible: true
          },
          {
              key: 6,
              label: `座位类型`,
              visible: true
          },
          {
              key: 7,
              label: `金额(含税)`,
              visible: true
          },
          {
              key: 8,
              label: `金额(不含税)`,
              visible: true
          },
          {
              key: 9,
              label: `燃油附加费`,
              visible: true
          },
          {
              key: 10,
              label: `税额`,
              visible: true
          },
          {
              key: 11,
              label: `车费`,
              visible: true
          },
          {
              key: 12,
              label: `乘车地区`,
              visible: true
          },
          {
              key: 13,
              label: `乘车行程(出发地)`,
              visible: true
          },
          {
              key: 14,
              label: `乘车行程(目的地)`,
              visible: true
          },
          {
              key: 15,
              label: `里程`,
              visible: true
          },
          {
              key: 16,
              label: `身份证号`,
              visible: true
          },
          {
              key: 17,
              label: `凭证号`,
              visible: true
          },
          {
              key: 18,
              label: `入账日期`,
              visible: true
          },
          {
              key: 19,
              label: `入账状态`,
              visible: true
          },
          {
              key: 20,
              label: `航班号`,
              visible: true
          },
          {
              key: 21,
              label: `出发日期`,
              visible: true
          },
          {
              key: 22,
              label: `校验码`,
              visible: true
          },
          {
              key: 23,
              label: `发票备注`,
              visible: true
          },
          {
              key: 24,
              label: `ERP发票流水号`,
              visible: true
          }
      ],
      // 总条数
      total: 0,
      // 进项非增值税发票表格数据
      innonvoiceList: [],
      // 进项非增值税发票发票附件表格数据
      tInNonInvoiceFileList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //
      daterangeAccountDate: [],
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params:{

        },
        invoiceId: null,
        custId: null,
        siteCode: null,
        nonInvoiceType: null,
        nonInvoiceTypes: [],
        invoiceNo: null,
        invoiceCode: null,
        flightNo: null,
        travelDate: null,
        invoiceDate: null,
        printNumber: null,
        sellerBank: null,
        sellerAccount: null,
        voucherNumber: null,
        accountDate: null,
        accountStatus: null,
        accountStatuses:[],
        processStatus: null,
        invoiceStatus: null,
        invoiceStatuses: [],
        submitStatus: null,
        submitStatuses: [],
        checkCode: null,
        erpSerialNumber: null,
      },
      checkAllNonInvoiceType: false,
      isNonInvoiceTypeIndeterminate: false,
      checkAllAccountStatus: false,
      isAccountStatusIndeterminate: false,
      checkAllInvoiceStatus: false,
      isInvoiceStatusIndeterminate: false,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },

      /* ======================================省市区======================================  */
      // 省
      provinceId: null,
      provinceList:[],
      // 市
      cityId: null,
      cityList:[],
      // 区
      districtId: null,
      districtList:[],
      detailForm:{

      },
      invoiceOpen:false,
      images:['', 'https://huisuiyun.oss-cn-shanghai.aliyuncs.com/permanent/purchaserDiscern/purchaserDiscern/20240318/cb4f9109-f82c-46c2-bd5f-ed5e14f0ebcf.jpg'],

      /* ======================================查询条件-公司代码选择======================================  */
      searchsiteCodes:[],
      searchsiteCodenames:[],
      searchsiteCodeTotal: 0,
      searchsiteCodeList: [],
      searchsiteCodeDialogOpen: false,
      searchsiteCodeSelectLoading: false,
      searchsiteCodeQueryParams: {
          searchValue: null,
          pageNum: 1,
          pageSize: 20,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 行样式 */
    rowClass({ row, rowIndex }) {
      if (this.ids.includes(row.id)) {
          return { background: "#d9edf7", height:'20px' };
      } else {
          return { height:'20px'};
      }
    },
   /** 隐藏搜索按钮操作 */
   showSearchFun(isShowSearch){
      this.showSearch = isShowSearch
      let oldHeight = this.$refs.queryRef.$el.offsetHeight
      if(!isShowSearch){
          //当前是显示状态
          oldHeight = oldHeight + 12
      }else{
          oldHeight = oldHeight - 12
      }
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    /** 展开按钮操作 */
    toggleAdvanced() {
      const oldHeight = this.$refs.queryRef.$el.offsetHeight
      this.advanced = !this.advanced
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    /** 查询进项非增值税发票列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeAccountDate && '' != this.daterangeAccountDate) {
        this.queryParams.params["beginAccountDate"] = this.daterangeAccountDate[0];
        this.queryParams.params["endAccountDate"] = this.daterangeAccountDate[1];
      }
      listInnonvoice(this.queryParams).then(response => {
        this.innonvoiceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        invoiceId: null,
        custId: null,
        siteCode: null,
        siteName: null,
        nonInvoiceType: null,
        nonInvoiceTypeName: null,
        invoiceNo: null,
        invoiceCode: null,
        flightNo: null,
        travelDate: null,
        invoiceDate: null,
        printNumber: null,
        fee: null,
        feeWithoutTax: null,
        feeExtra: null,
        tax: null,
        feeVehicle: null,
        sellerName: null,
        sellerNumber: null,
        sellerDest: null,
        rideTime: null,
        seatType: null,
        sellerTel: null,
        sellerBank: null,
        sellerAccount: null,
        voucherNumber: null,
        accountDate: null,
        accountStatus: null,
        accountStatusName: null,
        processStatus: null,
        processStatusName: null,
        invoiceStatus: null,
        invoiceStatusName: null,
        submitStatus: null,
        submitStatusName: null,
        checkCode: null,
        invoiceRemark: null,
        erpSerialNumber: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.tInNonInvoiceFileList = [];
      this.resetForm("form");
    },


      /* ※※ 查询 省市区 相关方法 start ※※ */
      // 获取省
      getProvinceList(){
          provinceList().then(response => {
              this.provinceList = response.data;
          });
      },
      // 获取市
      getCityList(){
          console.log(this.provinceId);
          cityList( {"parentId" : this.provinceId } ).then(response => {
              this.cityList = response.data;
          });
      },
      // 获取区县
      getDistrictList(){
          districtList( {"parentId" : this.cityId } ).then(response => {
              this.districtList = response.data;
          });
      },
      // 选中省份
      handleChangeProvince(val){
          // 给表单省字段赋值
          this.form.provinceid = val;
          let province = {};
          province = this.provinceList.find((item)=>{
              return item.id === val;
          });
          this.form.province = province.name;
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getCityList();
      },
      // 清空省份
      handleClearProvince(){
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中城市
      handleChangeCity(val){
          // 给表单市字段赋值
          this.form.cityid = val;
          let city = {};
          city = this.cityList.find((item)=>{
              return item.id === val;
          });
          this.form.city = city.name;
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getDistrictList();
      },
      // 清空省份
      handleClearCity(){
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中区县
      handleChangeDistrict(val){
          // 给表单省字段赋值
          this.form.areaid = val;
          let district = {};
          district = this.districtList.find((item)=>{
              return item.id === val;
          });
          this.form.area = district.name;
      },
      // 清空省份
      handleClearDistrict(){
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },

      /* ※※ 查询 省市区 相关方法 end ※※ */



    /* ※※ 查询 公司代码 相关方法 start ※※ */
    /** ① 弹出查询条件-公司代码 */
    openSearchsiteCodeDialogOpen(){
        this.searchsiteCodeDialogOpen = true;
        // 默认不查询
    },
    /** ② 单击行 **/
    handleSearchsiteCodeRowClick(row, column, event){
        this.$refs.searchsiteCodeSingleTable.toggleRowSelection(row);
    },
    /** ③ 行KEY **/
    getSearchsiteCodeListRowKey(row) {
        return row.companycode
    },
    /** ④ 选中公司代码 **/
    handleSearchsiteCodeSelectionChange(selection) {
        this.searchsiteCodes = selection.map(item => item.siteCode);
        this.searchsiteCodenames = selection.map(item => item.siteName);
    },
    /** ⑤ 点击查询按钮 **/
    handleSearchsiteCodeQuery(){
        this.searchsiteCodeQueryParams.pageNum = 1;
        this.getSearchsiteCodeList();
    },
    /** ⑥ 查询 **/
    getSearchsiteCodeList(){
        this.searchsiteCodeSelectLoading = true;
        listcompany(this.searchsiteCodeQueryParams).then(response => {
            this.searchsiteCodeList = response.rows;
            this.searchsiteCodeTotal = response.total;
            this.searchsiteCodeSelectLoading = false;
        });
    },
    /** ⑦ 点击确认查询 **/
    confirmSearchsiteCode() {
        if(this.searchsiteCodes.length > 0){
            this.queryParams.params.siteCodes = this.searchsiteCodes.join(',');
            this.queryParams.params.companynames = this.searchsiteCodenames.join(',');
        }
        // 关闭查询弹出框
        this.searchsiteCodeCancel();
    },
    /** ⑧ 点击关闭查询弹出框 **/
    searchsiteCodeCancel() {
        this.searchsiteCodeDialogOpen = false;
    },
    /* ※※ 查询 公司代码 相关方法 end ※※ */



    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeAccountDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加进项非增值税发票";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getInnonvoice(id).then(response => {
        this.form = response.data;
        this.tInNonInvoiceFileList = response.data.tInNonInvoiceFileList;
        this.open = true;
        this.title = "修改进项非增值税发票";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.tInNonInvoiceFileList = this.tInNonInvoiceFileList;
          if (this.form.id != null) {
            updateInnonvoice(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInnonvoice(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除进项非增值税发票编号为"' + ids + '"的数据项？').then(function() {
        return delInnonvoice(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    handleOpenInvoice() {
        this.invoiceOpen = true;
        // TODO 获取附件

    },



    /** 进项非增值税发票发票附件序号 */
    rowTInNonInvoiceFileIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 进项非增值税发票发票附件添加按钮操作 */
    handleAddTInNonInvoiceFile() {
      let obj = {};
      obj.fileId = "";
      obj.custId = "";
      obj.siteCode = "";
      obj.siteName = "";
      obj.fileName = "";
      obj.fileUrl = "";
      obj.fileSampleUrl = "";
      obj.fileType = "";
      obj.status = "";
      obj.statusName = "";
      this.tInNonInvoiceFileList.push(obj);
    },
    /** 进项非增值税发票发票附件删除按钮操作 */
    handleDeleteTInNonInvoiceFile() {
      if (this.checkedTInNonInvoiceFile.length == 0) {
        this.$modal.msgError("请先选择要删除的进项非增值税发票发票附件数据");
      } else {
        const tInNonInvoiceFileList = this.tInNonInvoiceFileList;
        const checkedTInNonInvoiceFile = this.checkedTInNonInvoiceFile;
        this.tInNonInvoiceFileList = tInNonInvoiceFileList.filter(function(item) {
          return checkedTInNonInvoiceFile.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleTInNonInvoiceFileSelectionChange(selection) {
      this.checkedTInNonInvoiceFile = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/innonvoice/export', {
        ...this.queryParams
      }, `innonvoice_${new Date().getTime()}.xlsx`)
    },

    /** 动态加载关键字查询条件 */
    remoteSearchValue(query) {
        this.remoteSearchValueLoading = true;
        if (query !== '') {
            this.searchValueOptions = [
                {value: '发票号码:' + query ,label: '发票号码:' + query },
                {value: '凭证号:' + query ,label: '凭证号:' + query },
            ];
            this.searchValueOptions.map(item => {
                this.queryParams.searchValues.map((item2, index) => {
                    if(item.value.startsWith('发票号码') && item2.startsWith('发票号码')){
                        item.disabled = true;
                    }
                    if(item.value.startsWith('凭证号') && item2.startsWith('凭证号')){
                        item.disabled = true;
                    }
                })
            });
        } else {
            this.searchValueOptions = [];
        }
        this.remoteSearchValueLoading = false;
    },

    checkAll(val, column){
        if(val){
            switch (column) {
                case 'nonInvoiceType':
                    this.dict.type.non_invoice_type.map((dict, index) => {
                        this.queryParams.nonInvoiceTypes.push(dict.value)
                    });
                    break;
                case 'accountStatus':
                    this.dict.type.account_status.map((dict, index) => {
                        this.queryParams.accountStatuses.push(dict.value)
                    });
                    break;
                case 'processStatus':
                    this.dict.type.process_status.map((dict, index) => {
                        this.queryParams.processStatuses.push(dict.value)
                    });
                    break;
                case 'invoiceStatus':
                    this.dict.type.invoice_status.map((dict, index) => {
                        this.queryParams.invoiceStatuses.push(dict.value)
                    });
                    break;
                case 'checkStatus':
                    this.dict.type.check_status.map((dict, index) => {
                        this.queryParams.checkStatuses.push(dict.value)
                    });
                    break;
                case 'collectStatus':
                    this.dict.type.collect_status.map((dict, index) => {
                        this.queryParams.collectStatuses.push(dict.value)
                    });
                    break;
                case 'signStatus':
                    this.dict.type.sign_status.map((dict, index) => {
                        this.queryParams.signStatuses.push(dict.value)
                    });
                    break;
                case 'matchStatus':
                    this.dict.type.match_status.map((dict, index) => {
                        this.queryParams.matchStatuses.push(dict.value)
                    });
                    break;
                case 'submitStatus':
                    this.dict.type.submit_status.map((dict, index) => {
                        this.queryParams.submitStatuses.push(dict.value)
                    });
                    break;
            }

        } else {
            switch (column) {
                case 'nonInvoiceType':
                    this.queryParams.nonInvoiceTypes = []
                    break;
                case 'accountStatus':
                    this.queryParams.accountStatuses = []
                    break;
                case 'processStatus':
                    this.queryParams.processStatuses = []
                    break;
                case 'invoiceStatus':
                    this.queryParams.invoiceStatuses = []
                    break;
                case 'checkStatus':
                    this.queryParams.checkStatuses = []
                    break;
                case 'collectStatus':
                    this.queryParams.collectStatuses = []
                    break;
                case 'signStatus':
                    this.queryParams.signStatuses = []
                    break;
                case 'matchStatus':
                    this.queryParams.matchStatuses = []
                    break;
                case 'submitStatus':
                    this.queryParams.submitStatuses = []
                    break;
            }
        }
        switch (column) {
            case 'nonInvoiceType':
                this.isNonInvoiceTypeIndeterminate = false;
                break;
            case 'accountStatus':
                this.isAccountStatusIndeterminate = false;
                break;
            case 'processStatus':
                this.isProcessStatusIndeterminate = false;
                break;
            case 'invoiceStatus':
                this.isInvoiceStatusIndeterminate = false;
                break;
            case 'checkStatus':
                this.isCheckStatusIndeterminate = false;
                break;
            case 'collectStatus':
                this.isCollectStatusIndeterminate = false;
                break;
            case 'signStatus':
                this.isSignStatusIndeterminate = false;
                break;
            case 'matchStatus':
                this.isMatchStatusIndeterminate = false;
                break;
            case 'submitStatus':
                this.isSubmitStatusIndeterminate = false;
                break;
        }

    },

    handleCheckedChange(value, column){
        let checkedCount = value.length;
        switch (column) {
            case 'invoiceType':
                this.checkAllNonInvoiceType = checkedCount === this.dict.type.non_invoice_type.length;
                this.isNonInvoiceTypeIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.non_invoice_type.length;
                break;
            case 'accountStatus':
                this.checkAllAccountStatus = checkedCount === this.dict.type.account_status.length;
                this.isAccountStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.account_status.length;
                break;
            case 'processStatus':
                this.checkAllProcessStatus = checkedCount === this.dict.type.process_status.length;
                this.isProcessStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.process_status.length;
                break;
            case 'invoiceStatus':
                this.checkAllInvoiceStatus = checkedCount === this.dict.type.invoice_status.length;
                this.isInvoiceStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.invoice_status.length;
                break;
            case 'checkStatus':
                this.checkAllCheckStatus = checkedCount === this.dict.type.check_status.length;
                this.isCheckStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.check_status.length;
                break;
            case 'collectStatus':
                this.checkAllCollectStatus = checkedCount === this.dict.type.collect_status.length;
                this.isCollectStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.collect_status.length;
                break;
            case 'signStatus':
                this.checkAllSignStatus = checkedCount === this.dict.type.sign_status.length;
                this.isSignStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.sign_status.length;
                break;
            case 'matchStatus':
                this.checkAllMatchStatus = checkedCount === this.dict.type.match_status.length;
                this.isMatchStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.match_status.length;
                break;
            case 'submitStatus':
                this.checkAllSubmitStatus = checkedCount === this.dict.type.submit_status.length;
                this.isSubmitStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.submit_status.length;
                break;
        }

    }
  }
};
</script>
